<template>
  <div class="app-container">
    <el-button
      type="primary"
      icon="el-icon-search"
      size="mini"
      @click="showDetail = true"
      >打开</el-button
    >
    <el-table
      :data="tableData"
      style="width: 100%"
      :span-method="objectSpanMethod"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        prop="Name"
        label="名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="Level"
        label="等级"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="currenttime"
        label="时间"
        align="center"
      ></el-table-column>
    </el-table>
    <!-- 属性面板 -->
    <el-drawer
      title="达人详情"
      :before-close="handleClose"
      :visible.sync="showDetail"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="65%"
    >
      <Detail />
    </el-drawer>
  </div>
</template>

    <script>
import { listBySku } from "@/api/productAllocation/task";
import Detail from "./Detail"; // 新建页面
export default {
  // script
  components: {
    Detail,
  },
  data() {
    return {
      showDetail: false,
      tableData: [],
      list: [],
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    // this.getSpanArr();
  },
  methods: {
    handleClose() {
      this.getList();
      this.showDetail = false;
      // this.isShowSecond = false;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.list = selection.map((item) => item);
      console.log(JSON.stringify(this.list));
    },
    /** 查询销退异常上架分配列表 */
    getList() {
      listBySku(this.queryParams).then((response) => {
        response = [
          {
            Name: "AAA",
            Level: "1",
            currenttime: "2024-1-29",
          },
          {
            Name: "AAA",
            Level: "2",
            currenttime: "2024-1-29",
          },
          {
            Name: "AAA",
            Level: "2",
            currenttime: "2024-1-29",
          },
          {
            Name: "CCC",
            Level: "2",
            currenttime: "2024-1-29",
          },
        ];
        this.tableData = response;
      });
    },
    // 表格合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 判断第一列的行合并
      if (columnIndex === 1) {
        const _row = this.getSpanArr(this.tableData, "Name")[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }

      // 判断第二列的行合并
      if (columnIndex === 2) {
        const _row = this.getSpanArr(this.tableData, "Level", "Name")[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      // 判断第二列的行合并
      if (columnIndex === 3) {
        const _row = this.getSpanArr(this.tableData, "currenttime", "Name")[
          rowIndex
        ];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 计算合并行数
    getSpanArr(data, key, faKey) {
      /**
       * data 表身数据
       * key当前需要合并的属性名称
       * faKey ：如果有多列属性需要行合并，此时需要判断第二个属性需不需再第一个属性相同的条件下才合并，不需要就不用传，需要就穿第一个属性名
       *
       */

      // 遍历数据
      let spanArr = [];
      let pos = 0;
      for (let i = 0; i < data.length; i++) {
        // 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0
        if (i === 0) {
          spanArr.push(1);
          pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同（且只有同faKey 下的第二列才能合并，不同faKey 下的第二列重新计数,如果不需要这样判断，就去除&&后面的判断）

          if (
            data[i][key] === data[i - 1][key] &&
            data[i][faKey] === data[i - 1][faKey]
          ) {
            // 如果相同就将索引为 pos 的值加一
            spanArr[pos] += 1;
            // 且将数组添加 0
            spanArr.push(0);
          } else {
            // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
            // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
            spanArr.push(1);
            // 同时 索引加一
            pos = i;
          }
        }
      }
      console.log("索引数组：");
      console.log(spanArr, key);
      return spanArr;
    },
  },
};
</script>